<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <!-- inject:css -->

    <link rel="stylesheet" href="/dist/styles/build/map.min.1476270773013.css"/>

    <!-- endinject -->
    <title>菜场位置</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

    	#map-container {
    		position: absolute;
    		width: 100%;
    		height: 100%;
            cursor: url("http://webapi.amap.com/theme/v1.3/openhand.cur"), default;
    	}
    </style>
</head>

<body>
    <div id="map-container"></div>

    <div class="header">
        <img src="/icons/location-star.png" />
        <div class="name">{{ market.marketName }}</div>
    </div>

    <div class="footer">
        <ul class="main">
            <li>{{ market.address }}</li>
            <li>{{ market.ytime }}</li>
            <li>{{ market.contact }}</li>
        </ul>
        <ul class="sub">
            <li>{{ market.number }}</li>
            <li>{{ market.square }}</li>
            <li>{{ market.junit }}</li>
            <li>{{ market.zunit }}</li>
            <li>{{ market.cunit }}</li>
            <li>{{ market.gtime }}</li>
        </ul>
    </div>

    <script src="http://api.map.baidu.com/api?v=2.0&ak=YLIXKCZq5ZPp3cP3mMsDhUG4fNRAIRud" type="text/javascript"></script>

    <script type="text/javascript">
        var zoom = 18;
        var markets = '{{ markets }}';
        var currentMarket = '{{ marketStr }}';

        currentMarket = currentMarket.replace(/&quot;/g, "\"");
        currentMarket = JSON.parse(currentMarket);

        markets = markets.replace(/&quot;/g, "\"");
        markets = JSON.parse(markets);

    	var currentLng = '{{ market.longitude }}' * 1;
    	var currentLat = '{{ market.latitude }}' * 1;

        var map = new BMap.Map("map-container");

        // 当前菜场
        var currentPoint = new BMap.Point(currentLng, currentLat);
        map.centerAndZoom(currentPoint, zoom);
        var myIcon = new BMap.Icon("/icons/location-red.png", new BMap.Size(32,32));
        var marker = new BMap.Marker(currentPoint, {icon:myIcon});
        marker.addEventListener("click", onclickMarker.bind(null, currentMarket));
        map.addOverlay(marker);
//        var label = new BMap.Label('{{ market.marketName }}', {offset:new BMap.Size(-60,-18)});
//        label.setStyle({'border': 'none', 'padding': '4px 8px'});
//        marker.setLabel(label);

        // 其他菜场
        markets.forEach(function(market) {
            var point = new BMap.Point(market.longitude, market.latitude);
            var m = new BMap.Marker(point);
            m.addEventListener("click", onclickMarker.bind(null, market));
            map.addOverlay(m);
//            label = new BMap.Label(market.marketName, {offset:new BMap.Size(-60,-18)});
//            label.setStyle({'border': 'none', 'padding': '4px 8px'});
//            m.setLabel(label);
        });


        function onclickMarker(market) {
            document.querySelector('.header .name').innerHTML = market.marketName;

            document.querySelector('.footer').innerHTML = [
                    '<ul class="main">',
                        '<li>' + market.address + '</li>',
                        '<li>' + market.ytime + '</li>',
                        '<li>' + market.contact + '</li>',
                    '</ul>',
                    '<ul class="sub">',
                        '<li>' + market.number + '</li>',
                        '<li>' + market.square + '</li>',
                        '<li>' + market.junit + '</li>',
                        '<li>' + market.zunit + '</li>',
                        '<li>' + market.cunit + '</li>',
                        '<li>' + market.gtime + '</li>',
                    '</ul>'
            ].join('');
        }

    </script>
</body>